<template>
    <div class="tags" >
        <ul>
            <li  v-for="(item,index) in tagsList" v-bind:key="index">
                <div class="tags-div" :class="{'active': isActive(item.path)}">
                    <span>
                        <router-link :to="item.path" class="tags-name">
                            {{item.name}}
                        </router-link>
                    </span>
                    <span v-if="item.name != '主页' " class="tags-li-icon" @click="removeTag(item.path,index)" ><i class="el-icon-close"></i></span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    components:{
        
    },
    data() {
        return {
            tagsList: [
                {
                    name : "主页",
                    path : "/main"
                },
                // {
                //     name : "数据维护",
                //     path : "/kzdata"
                // },
                // {
                //     name : "口罩客服",
                //     path : "/kzkf"
                // },
                // {
                //     name : "口罩客诉",
                //     path : "/kzts"
                // },
                {
                    name : "口罩客诉-new",
                    path : "/kztsnew"
                },
                {
                    name : "产品维护",
                    path : "/KzProduct"
                },
                {
                    name : "销售维护",
                    path : "/KzSale"
                },
                {
                    name : "数据维护",
                    path : "/KzData"
                },
                
                
            ]
        }
    },
    methods: {
        isActive(path) {
            return path === this.$route.fullPath;
        },
        removeTag(path,index) {
            // 移除
            for(var i = 0 ; i < this.tagsList.length ;i++){
                if( path === this.tagsList[i].path ){
                    this.tagsList.splice(i, 1); 
                }
            }
            // 数据管理
            var doms = document.getElementsByClassName("tags-div");
            var flag = true ;
            for(var i = 0 ; i <doms.length ;i++){
                if(doms[i].className.indexOf("active") != -1 && i == index){
                     doms[0].classList.add("active");
                     this.$router.push({path:"/main"});
                }
                console.log("-", i);
            }
        }
    }
}
</script>

<style scoped>
.tags{
    font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.tags ul {
        box-sizing: border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
}
.tags li {
        list-style: none;
        line-height: 40px;
        float: left;
        margin-right: 5px;
}

.tags li> div {
        line-height: 20px;
        font-size: 14px;
        margin-top: 7px;
        padding: 3px;
        border-radius:3px;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        background: rgba(91, 79, 253, 0.815); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(91, 79, 253, 0.815) 20%, rgba(91, 79, 253) 80%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(91, 79, 253, 0.815) 20%,rgba(91, 79, 253) 80%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(91, 79, 253, 0.815) 20%,rgba(91, 79, 253) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(91, 79, 253, 0.815)', endColorstr='#668aff',GradientType=0 ); /* IE6-9 */
}
.tags-div:not(.active):hover {
        color: #fff;
        background:rgba(143, 136, 252, 0.815);
    }
.tags-div i:hover {
        color: rgb(184, 49, 49);
        background: #fff;
    }
.tags-div.active {
        color: #fff;
        background: rgb(199, 206, 250);
         background: rgb(199, 206, 250); /* Old browsers */
        background: -moz-linear-gradient(top,  rgb(199, 206, 250) 20%, #e2e8fa 80%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgb(199, 206, 250) 20%,#e2e8fa 80%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgb(199, 206, 250) 20%,#e2e8fa  80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
.tags-div.active .tags-name{
        color: rgba(91, 79, 253, 0.815);
    }
.tags-name{
    text-decoration:none;
}
.tags-div .tags-name{
     color: #fff;
     padding-left: 5px;
     padding-right: 5px;
}
</style>